<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="animate.css">
    <title>打字练习</title>
    <style>
        body{
            margin: 0;
            background: linear-gradient(to right, rgba(0,45,152,1),rgba(0,151,151,1));
            
        }
        #box{
            height: 300px;
            width: 300px;
            margin: 250px auto 0;
            color: #ffffaa;
            font-size: 200px;
            text-align: center;
            line-height: 300px;
            font-family: Lobster;
            /*text-shadow: 0 0 10px grey;*/


        }
        #word{
            margin: 0 auto;
            width: 500px;
            height: 50px;
            /*background-color: blue;*/
            font-size: 20px;
            text-align: center;
            line-height: 50px;
            font-family: Lobster;
            
            
        }
        #cai{
            margin: 0 auto;
            width: 500px;
            height: 50px;
            color: crimson;
            font-size: 30px;
            text-align: center;
            line-height: 50px;
            font-family: Lobster;
            /*font-weight: 700;*/

        }
    </style>
</head>
<body>
    <div id="box" class="animated">
        w
    </div>
    <div id="word">
        请输入您看到的字母
    </div>
    <div id="cai"></div>
    <script>
        var zm = document.getElementById("box");
        var zt = document.getElementById("word");
        var ca = document.getElementById("cai");
        
        var yes = 0;
        var no = 0;
        var clear;
        function appear(){
            var app = Math.random();
            app*=26;
            app+=65;
            app=Math.floor(app);
            var z = String.fromCharCode(app);
            zm.textContent = z;
        }
        appear();
        document.body.onkeydown=function(e){
            var k = e.key.toUpperCase()
            if(k==zm.textContent){
                yes++
                appear();
                zm.classList.add("zoomIn")
                clear = setTimeout(function(){
                    zm.classList.remove("zoomIn");
                },500);


            }else if(k!="F5"){
                no++
                zm.style.color="red";                
                zm.classList.add("wobble")
                clear = setTimeout(function(){
                    zm.classList.remove("wobble");
                    zm.style.color="#ffffaa";
                },500);
            }

            var zq = yes/(yes+no)*100;
            zq = Math.floor(zq);
            zt.textContent ="正确 "+yes+" 个，错误 "+no+" 个，正确率 "+zq+"%";
            if(zq<=30){
                ca.textContent ="兄弟不行啊，你好菜菜呢！";

            }else{
                 ca.textContent ="";

            }

        }
        



    </script>
</body>
</html>